<template>
    <div class="seaall">
        <van-search v-model="search" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
        <div v-if="flag" class="sea-qian">
            <p style="font-size: 14px;color: #999999;margin:10px 0;">热门搜素</p>
            <div class="sea-lishi">
                <ul>
                    <li v-show="searchls.length >= 1" v-for="item in hotSearches" :key="item.id" @click="onlishi(item)">
                        {{ item.val }}</li>
                    <li v-show="searchls.length == 0">暂无记录</li>
                </ul>
            </div>
            <p class="sea-1px"></p>
            <p style="font-size: 14px;color: #999999;margin:10px 0;">搜索历史</p>
            <div class="sea-lishi">
                <ul>
                    <li v-show="searchls.length >= 1" v-for="item in getSearchHistory" :key="item.id"
                        @click="onlishi(item)">{{ item.val }}</li>
                    <li v-show="searchls.length == 0">暂无记录</li>
                </ul>
            </div>
        </div>
        <div v-else class="sea-hou">
            <p style="font-size:14px;color: #999999;margin:10px 0;">相关课程</p>
            <div class="det-classcourse" v-for="item in courseAlldata.slice(0, 3)" :key="item._id"
                @click="detailke(item)" v-show="courseAlldata.length >= 1">
                <div class="det-class-boxleft">
                    <img src="@/assets/u1975.png" alt="jl" class="img">
                </div>
                <div class="det-class-boxright">
                    <p>{{ item.title.slice(0, 20) + '.....' }}</p>
                    <ul>
                        <li>{{ item.num }}人正在学</li>
                        <li class="det-class-price">限时{{ item.price }}元</li>
                    </ul>
                </div>
            </div>
            <div v-show="courseAlldata.length == 0">暂无搜索记录</div>
            <p style="font-size:14px;color: #999999;margin:10px 0;">相关阅读</p>
            <div class="det-class" v-for="item in articleAlldata.slice(0, 3)" :key="item._id" @click="detail(item)"
                v-show="articleAlldata.length >= 1">
                <div class="det-class-boxleft">
                    <img src="@/assets/jl.png" alt="jl" class="img">
                </div>
                <div class="det-class-boxright">
                    <p>{{ item.title.slice(0.20) + '......' }}</p>
                    <ul>
                        <li>{{ item.name }}</li>
                        <li><van-icon name="eye-o" />&nbsp;{{ item.cnum }}</li>
                    </ul>
                </div>
            </div>
            <div v-show="articleAlldata.length == 0">暂无搜索记录</div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { getSearchcom } from '@/api/index.js'

const router = useRouter()
const search = ref('')
const flag = ref(true)
const articleAlldata = ref([])
const courseAlldata = ref([])
const searchls = ref(JSON.parse(localStorage.getItem('searchAll')) || [])

const onSearch = () => {
    getlist()
    flag.value = false
    const searchValue = search.value.trim(); // 去除搜索值两边的空格
    if (searchValue === '') {
        return; // 如果搜索值为空，则不添加到搜索历史
    }
    let obj = {
        id: Date.now(),
        val: search.value
    }
    searchls.value.push(obj)
    localStorage.setItem('searchAll', JSON.stringify(searchls.value))
}

// 获取搜索历史并过滤重复项
const getSearchHistory = computed(() => {
    const searchHistorySet = new Map();
    searchls.value.forEach(item => {
        searchHistorySet.set(item.val, item);
    });
    return [...searchHistorySet.values()];
});

// 获取重复次数超过3次的搜索项
const duplicateItems = computed(() => {
    const searchMap = new Map();
    searchls.value.forEach(item => {
        const val = item.val;
        if (searchMap.has(val)) {
            searchMap.set(val, searchMap.get(val) + 1);
        } else {
            searchMap.set(val, 1);
        }
    });

    const duplicates = [];
    searchMap.forEach((count, val) => {
        if (count > 3) {
            duplicates.push(val);
        }
    });

    // 根据重复搜索项的值，从原数组中获取完整的对象信息
    const result = [];
    searchls.value.forEach(item => {
        if (duplicates.includes(item.val)) {
            result.push(item);
        }
    });
    return result;
})

// 将重复搜索项的值提取出来作为热门搜索
const hotSearches = computed(() => {
    const searchHistorySet = new Map();
    duplicateItems.value.forEach(item => {
        searchHistorySet.set(item.val, item);
    });
    return [...searchHistorySet.values()];
});

const onlishi = (ite) => {
    search.value = ite.val
}

const onCancel = () => {
    router.back()
};

const detailke = (item) => {
    localStorage.setItem('listObj', JSON.stringify(item))
    router.push({ path: '/xiang' })
}

const detail = async (item) => {
    router.push({ path: `/details/${item._id}` })
    // const { data: { list } } = await Axios.get(`/mtg/detids/${item._id}`)
    // detailsdata.value = list    
}

watch(search, (newsea, oldsea) => {
    if (!newsea) {
        flag.value = true
    }
})

const getlist = onMounted(async () => {
    const { articleAll, courseAll } = await getSearchcom({ params: { search: search.value } })
    articleAlldata.value = articleAll
    courseAlldata.value = courseAll
})
</script>

<style lang="scss" scoped>
.seaall {
    .sea-qian {
        margin: 0 15px;

        .sea-lishi {
            ul {
                list-style: none;
                display: flex;

                li {
                    padding: 3px 8px;
                    border: 1px solid #666EE8;
                    margin-right: 10px;
                    font-size: 12px;
                    color: #666EE8;
                    border-radius: 20px;
                    background-color: #666EE819;
                    line-height: 15px;
                }
            }
        }

        @media screen and (-webkit-min-device-pixel-ratio: 2) {
            .sea-1px {
                margin: 30px 0;
                border: 0.33333px solid #999;
                -webkit-transform: scale(0.555555);
                transform: scale(0.555555);
            }
        }

        @media screen and (-webkit-min-device-pixel-ratio: 3) {
            .sea-1px {
                margin: 30px 0;
                border: 0.33333px solid #999;
                -webkit-transform: scale(0.33333333);
                transform: scale(0.3333333333);
            }
        }
    }

    .sea-hou {
        margin: 0 15px;

        .det-class {
            padding: 5px 0;
            display: flex;
            justify-content: space-between;

            .det-class-boxleft {
                width: 120px;
                height: 75px;
                background-color: #666EE8;
                text-align: center;
                line-height: 75px;
                border-radius: 10px;

                .img {
                    width: 76px;
                    height: 65px;
                    align-items: center;
                    vertical-align: middle;
                }
            }

            .det-class-boxright {
                width: 215px;
                height: 75px;
                border-radius: 10px;

                p {
                    font-size: 14px;
                }

                ul {
                    display: flex;
                    justify-content: space-between;
                    font-size: 12px;
                    position: relative;
                    top: 25px;
                    color: #999999;
                }
            }
        }

        .det-classcourse {
            padding: 5px 0;
            display: flex;
            justify-content: space-between;

            .det-class-boxleft {
                width: 120px;
                height: 75px;
                background-color: #666EE8;
                text-align: center;
                line-height: 75px;
                border-radius: 10px;

                .img {
                    width: 80px;
                    height: 65px;
                }
            }

            .det-class-boxright {
                width: 215px;
                height: 75px;
                border-radius: 10px;

                p {
                    font-size: 14px;
                    font-weight: bold;
                }

                ul {
                    font-size: 12px;
                    color: #999999;

                    li {
                        margin: 10px 0;
                    }

                    .det-class-price {
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
</style>